<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 标签选择器 */
        /* div {
            color: gray;
        } */

        /* 类选择器 */
        /* .word {
            color: rgb(184, 33, 253);
        } */

        /* id 选择器 */
        /* #word {
            color: rgb(184, 33, 253);
        } */

        /* 通配符选择器 */
        /* * {
            color: red;
        } */

        /* 后代选择器 */
        /* ul li {
            color: red;
        } */

        /*子选择器  */
        /* .cat ul li #dog1 {
            color: red;
        }

        .cat ul li #dog2 {
            color: green;
        } */


        /* 子类选择器 和 后代选择器 的区别 */
        /* .cat a {
            color: hsl(48, 99%, 55%);
        }

        .cat>a {
            color: hsl(48, 99%, 55%);
        }

        div,
        h3,
        ul li {
            color: blue;
        } */

        /* 伪类选择器 */
        a:link {
            color: black;
        }

        a:visited {
            color: gray;
        }

        a:hover {
            color: red;
        }

        a:active {
            color: chartreuse;
        }

        .three>input:focus {
            color: red;
        }
    </style>

    <!-- <link rel="stylesheet" href="./css01.css"> -->
</head>

<body>

    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
    <br>

    <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
    <br>
    <a href="https://image.baidu.com/" target="_blank">百度图片</a>


    <!-- 需求：将三者的颜色同时修改为蓝色 -->
    <!-- <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橘子</li>
    </ul> -->

    <!-- 需求：将两只小狗的颜色修改为一红一绿 -->
    <!-- <div class="cat">
        <a href="#">小猫</a>
        <ul>
            <li>
                <a href="#" id="dog1">小狗</a>
            </li>
            <li>
                <a href="#" id="dog2">小狗</a>
            </li>
        </ul>
    </div> -->

    <!-- 需求，将 ul 下的 li 标签颜色修改为 红色 -->
    <!-- <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>

    <ol>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ol> -->


    <!-- <div id="word">
        hello world
    </div> -->

    <!-- <div class="word">
        hello world
    </div> -->

    <!-- 
    <div style="color: red;">hello world</div>

    <p>hello world</p> -->

</body>

</html>